<!DOCTYPE html><!--  Last Published: Mon Mar 04 2024 13:34:29 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="6581085f441714e1dbf730af" data-wf-site="657c661418a503e0b43c9905">
<head>
  <meta charset="utf-8">
  <title>cardzhuye</title>
  <meta content="cardzhuye" property="og:title">
  <meta content="cardzhuye" property="twitter:title">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/shikais-stunning-site.webflow.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
  <style>
.zhuyezhuti .zhuyezhutitext {
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 显示省略号 */
    list-style-type: none; /* 可选：移除列表标记 */
}
</style>
</head>
<body class="body-3">
  <div id="appzhutiye" class="vue-root">
    <section class="section-5">
      <div data-animation="default" data-collapse="small" data-duration="400" data-easing="ease-in" data-easing2="ease" role="banner" class="navbar-3 w-nav">
        <div class="container-13 w-container">
          <div class="div-block-6">
            <form action="/search" class="search w-form"><input class="search-input w-input" autofocus="true" maxlength="256" name="query" v-model="searchQuery" placeholder="搜索主题" type="search" id="search" required=""><img src="images/sousuoanniu.png" loading="lazy" alt="" class="image-3"></form>
          </div>
          <nav role="navigation" class="nav-menu-3 w-nav-menu">
            <div data-hover="false" data-delay="0" class="w-dropdown">
              <div class="yonghuxinxi w-dropdown-toggle">
                <div class="div-block-9"><img src="images/xinzengzhuti.svg" loading="lazy" width="36" alt=""></div>
              </div>
              <nav class="dropdown-list w-dropdown-list">
                <a data-w-id="2032a494-d90d-dc9d-d022-10ffcbef43ab" href="#" class="yonghu_xuanze w-dropdown-link">新建卡片</a>
                <a data-w-id="beed6ff7-a277-0fae-3364-3b0bb5802911" href="#" class="dropdown-link yonghu_xuanze w-dropdown-link">新建主题</a>
              </nav>
            </div>
            <div data-hover="false" data-delay="0" class="w-dropdown">
              <div class="yonghuxinxi w-dropdown-toggle">
                <div class="div-block-9"><img src="images/weixintouxiang_lsk.jpg" loading="lazy" height="33" alt="" width="33" srcset="images/weixintouxiang_lsk-p-500.jpg 500w, images/weixintouxiang_lsk.jpg 516w" sizes="(max-width: 767px) 100vw, 33px" class="image-2"></div>
              </div>
              <nav class="dropdown-list w-dropdown-list">
                <a href="personal.html" class="dropdown-link yonghu_xuanze w-dropdown-link">个人中心</a>
                <a href="index.html" class="yonghu_xuanze w-dropdown-link">官网首页</a>
                <a href="loginorregistry.html" class="yonghu_xuanze w-dropdown-link">退出登录</a>
              </nav>
            </div>
          </nav>
          <div class="w-nav-button">
            <div class="icon-2 iconzhnakai w-icon-nav-menu"></div>
          </div>
        </div>
      </div>
      <div class="w-layout-blockcontainer container-14 w-container">
        <a href="#" class="link-block w-inline-block">
          <div class="text-block-4">我的主题<br>‍</div>
        </a>
        <div data-hover="false" data-delay="0" class="w-dropdown">
          <div class="w-dropdown-toggle"><img src="images/paixu.svg" loading="lazy" width="15" alt=""></div>
          <nav class="paixuzhuti w-dropdown-list">
            <a v-on:click="sortByEditTime()" href="#" class="dropdown-link-2 w-dropdown-link">修改时间</a>
            <a v-on:click="sortByCreateTime()" href="#" class="dropdown-link-3 w-dropdown-link">创建时间</a>
            <a v-on:click="sortByOrderFromLocalStorage()" href="#" class="w-dropdown-link">自定义</a>
          </nav>
        </div>
      </div>
    </section>
    <section>
      <div class="w-layout-blockcontainer container-25 w-container">
        <p class="paragraph-6">主题</p>
      </div>
    </section>
    <section class="section-4">
      <div class="w-layout-blockcontainer container-15 w-container">
        <div class="div-block-7">
          <div v-bind:title="topic.topictitle" v-for="topic in filteredTopics" class="zhuyezhuti"><img src="images/wenjianjia.svg" loading="lazy" width="22" alt="" class="image-8">
            <div v-bind:title="topic.topictitle" v-on:click="goToCardPerform(topic)" class="zhuyezhutitext">{{topic.topictitle}}</div>
            <div data-hover="false" data-delay="0" class="dropdown_yonghu w-dropdown">
              <div class="yonghu_zhedie w-dropdown-toggle"><img src="images/gengduo.png" loading="lazy" width="20" alt="" class="image-6"></div>
              <nav class="yonghuxialazu w-dropdown-list">
                <a v-on:click="removeTopic(topic.topictitle)" href="#" class="w-dropdown-link">删除</a>
                <a v-on:click="openRenameDialog(topic)" href="#" class="w-dropdown-link">重命名</a>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div data-w-id="bae418a2-785a-9eac-5b78-4b3baf73ffe7" class="div-block-28 bianji">
      <section>
        <div class="w-layout-blockcontainer container-24 w-container">
          <div class="div-block-29">
            <div class="w-layout-hflex flex-block-3"><img src="images/取消.svg" loading="lazy" width="50" data-w-id="bae418a2-785a-9eac-5b78-4b3baf73ffec" alt=""></div>
            <h1 class="heading-2">编辑</h1>
            <div class="form-block-6 w-form">
              <form id="email-form-2" name="email-form-2" data-name="Email Form 2" redirect="#" data-redirect="#" action="http://#" method="get" data-wf-page-id="6581085f441714e1dbf730af" data-wf-element-id="bae418a2-785a-9eac-5b78-4b3baf73fff0"><label for="field">卡片正面</label>
                <div class="w-embed"><textarea class="textarea w-input" contenteditable="true" id="fronttextarea" v-bind:value="zhongjianka.front"></textarea></div><label for="email">卡片反面</label>
                <div class="w-embed"><textarea id="myTextarea" v-bind:value="zhongjianka.back" ref="fuwenbenbianji"></textarea></div>
                <div class="w-layout-hflex flex-block-4"><input id="bianjitijiao" type="submit" data-wait="Please wait..." v-on:click="getContentFromEditor()" class="submit-button-5 w-button" value="Submit"></div>
              </form>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div v-show="previewCards.length === 0" class="div-block-28 xinzengka">
      <section>
        <div class="w-layout-blockcontainer container-24 w-container">
          <div class="div-block-29">
            <div class="w-layout-hflex flex-block-3"><img src="images/取消.svg" loading="lazy" width="50" data-w-id="3d3a859f-1899-d2b9-45f5-744896210415" alt=""></div>
            <h1 class="heading-2">新增</h1>
            <div class="form-block-6 w-form">
              <form id="email-form-2" name="email-form-2" data-name="Email Form 2" redirect="#" data-redirect="#" action="http://#" method="get" data-wf-page-id="6581085f441714e1dbf730af" data-wf-element-id="3d3a859f-1899-d2b9-45f5-744896210419"><label for="field">卡片正面</label>
                <div class="w-embed"><textarea class="textarea w-input" contenteditable="true" id="fronttextareaxinzeng"></textarea></div><label for="email">卡片反面</label>
                <div id="xinzengfuwenbenkuang" class="w-embed"><textarea id="myTextareaxinzeng" ref="fuwenbenbianjixinzeng"></textarea></div>
                <div class="w-layout-hflex flex-block-4"><input id="xinzengtijiao" type="submit" data-wait="Please wait..." v-on:click="getContentFromEditorXinZeng()" class="submit-button-5 w-button" value="Submit"></div>
              </form>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <section class="section-4">
      <div class="w-layout-blockcontainer container-15 w-container">
        <div class="div-block-7">
          <div class="kapianliebiao w-embed">
            <div class="card">
              <h3>Card Title</h3>
              <p>This is a brief description of the flashcard.</p>
              <div class="actions">
                <button>Edit</button>
                <button>Delete</button>
                <button>View</button>
              </div>
            </div>
            <!--  Repeat for more cards  -->
          </div>
        </div>
      </div>
    </section>
    <div class="w-embed"><template>
        <!--  ... 其他代码 ...  -->
        <div v-if="showRenameDialog" class="modal-overlay-xiugai">
          <div class="modal-xiugai">
            <input v-model="newName" placeholder="请输入新名称">
            <button @click="renameTopic">确认</button>
            <button @click="cancelRename">取消</button>
          </div>
        </div>
      </template></div>
    <section class="section-6">
      <div class="w-layout-blockcontainer w-container"></div>
    </section>
    <section></section>
    <div class="div-block-11">
      <div class="div-block-12">
        <h6 class="heading">新建文件夹</h6><img src="images/取消.svg" loading="lazy" width="34" data-w-id="2e17eddb-fa0f-5925-f459-6feab4f3b46c" alt="" class="image-7">
        <div class="form-block-4 w-form">
          <form id="email-form" name="email-form" data-name="Email Form" method="get" class="form-4" data-wf-page-id="6581085f441714e1dbf730af" data-wf-element-id="2e17eddb-fa0f-5925-f459-6feab4f3b46e">
            <div class="text-block-5">名称：</div><input class="text-field-3 w-input" maxlength="256" name="xinzengzhuti" data-name="xinzengzhuti" v-model="newTopicName" placeholder="请输入名称" type="text" id="xinzengzhuti" required="">
            <div><img src="images/031_确定.svg" loading="lazy" v-on:click="addNewTopic()" alt="" width="50" class="image-9"></div>
          </form>
          <div class="w-form-done">
            <div>Thank you! Your submission has been received!</div>
          </div>
          <div class="w-form-fail">
            <div>Oops! Something went wrong while submitting the form.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tinymce-load0 w-embed w-script">
    <script src="http://43.136.220.136/static/vue.js"></script>
    <link href="http://43.136.220.136/static/skin.min.css" rel="stylesheet">
    <script src="http://43.136.220.136/static/tinymce@5.2.2.min.js"></script>
    <script src="http://43.136.220.136/static/tinymce-silver-theme.min@5.2.2.js"></script>
    <script src="http://43.136.220.136/static/tinymce-table-plugin@5.2.2.min.js"></script>
    <script src="http://43.136.220.136/static/tinymce-image-plugin@5.2.2.min.js"></script>
    <script src="http://43.136.220.136/static/tinymce-paste-plugin@5.2.2.min.js"></script>
  </div>
  <div class="tinymce-xiufu w-embed w-script">
    <script src="http://43.136.220.136/static/advlist-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/advlist-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/anchor-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/autolink-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/charmap-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/code-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/colorpicker-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/contextmenu-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/directionality-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/emoticons-js-emojis.min.js"></script>
    <script src="http://43.136.220.136/static/emoticons-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/fullscreen-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/hr-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/image-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/insertdatetime-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/link-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/lists-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/nonbreaking-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/paste-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/preview-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/save-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/searchreplace-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/table-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/textcolor-plugin.min.js"></script>
    <script src="http://43.136.220.136/static/textpattern-plugin.min.js"></script>
    <!--     这种方式导入可行 -->
    <script src="http://43.136.220.136/static/tinymce/plugins/axupimgs/plugin.js"></script>
    <!--     引入axios -->
    <script src="http://43.136.220.136/static/axios.min.js"></script>
    <script src="http://43.136.220.136/static/toc-plugin.js"></script>
    <script src="http://43.136.220.136/static/Sortable.min.js"></script>
    <script src="http://43.136.220.136/static/vuedraggable.umd.min.js"></script>
    <!--   引入样式   -->
    <!--     <link rel="stylesheet" href="static/theme-chalk-index.css"> -->
    <!--   引入组件库   -->
    <script src="http://43.136.220.136/static/element-ui-lib-index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script>
  document.addEventListener('DOMContentLoaded', function () {
    var submitButton = document.getElementById('bianjitijiao'); // 用你的按钮的ID替换 'your-button-id'
    if (submitButton) {
      submitButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认提交行为
        // 这里可以添加其他逻辑或消息
      });
    }
     var submitButton = document.getElementById('xinzengtijiao'); // 用你的按钮的ID替换 'your-button-id'
    if (submitButton) {
      submitButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认提交行为
        // 这里可以添加其他逻辑或消息
      });
    }
  });
</script>
  </div>

  <button id="syncButton" style="position: fixed; bottom: 20px; right: 20px; z-index: 100; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer;">
    同步数据
  </button>
  <div class="w-embed w-script">
    <script src="/js/cardzhuye-vue0307.js"></script>
    <script src="/js/perform-vue-1.js"></script>
    <style>
.zhuyezhuti .zhuyezhutitext {
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 显示省略号 */
    list-style-type: none; /* 可选：移除列表标记 */
}
.w-embed {
  display: contents;
}
.modal-overlay-xiugai {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-xiugai {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.w-embed {
  display: contents;
}
.modal-xiugai {
    z-index: 3!important
}
.container-16 .zhuyezhuti {
    z-index: -1!important
}
/* Zhuyezhuti */
.section-4 .div-block-7 .zhuyezhuti{
 width:152px;
 min-height:34px;
 border-style:none;
 box-shadow:6px 6px 20px 1px rgba(0,0,0,0.2);
 transform:translatex(0px) translatey(0px);
}
/* Image 8 */
.section-4 .zhuyezhuti .image-8{
 min-height:33px;
 left:13px;
 right:auto !important;
}
/* Zhuyezhutitext */
.section-4 .zhuyezhuti .zhuyezhutitext{
 position:relative;
 left:14px;
 top:0px;
 padding-left:0px;
 font-size:11px;
}
/* Dropdown yonghu */
.section-4 .zhuyezhuti .dropdown_yonghu{
 width:10px;
 left:120px;
 right:auto !important;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 height:26px;
 top:4px;
 bottom:auto !important;
}
/* Image */
.section-4 .yonghu_zhedie img{
 position:relative;
 top:3px;
 width:70%;
 left:4px;
}
/* Image */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .dropdown_yonghu .yonghu_zhedie img{
 bottom:auto !important;
 right:auto !important;
}
/* Zhuyezhutitext */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .zhuyezhutitext{
 width:82% !important;
}
/* Yonghu zhedie */
.section-4 .zhuyezhuti .yonghu_zhedie{
 margin-left:0px;
 margin-right:0px;
 top:-1px;
 bottom:auto !important;
 left:10px;
 right:auto !important;
}
/* Navigation */
.div-block-7 .zhuyezhuti nav{
 top:25px;
 box-shadow:5px 7px 21px 5px rgba(188,188,188,0.44);
 width:79px;
 min-width:79px;
}
/* Navigation */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .dropdown_yonghu nav{
 bottom:auto !important;
}
/* Dropdown link */
.div-block-7 .zhuyezhuti .w-dropdown-link{
 border-bottom-style:solid;
 border-bottom-color:rgba(34,34,34,0.08);
 border-bottom-width:1px;
}
/* Navigation */
.w-nav-menu .w-dropdown nav{
 left:-29px;
 top:37px;
 box-shadow:2px 2px 6px 0px #d6d6d6;
}
/* Navigation */
.section-5 .w-nav .w-container .w-nav-menu .w-dropdown nav{
 right:auto !important;
 bottom:auto !important;
}
/* Section 5 */
.section-5{
 z-index:1;
}
/* Input */
#appzhutiye .modal-xiugai input{
 border-style:none;
 box-shadow:0px 1px 3px 0px #b7b7b7;
}
/* Navigation */
.div-block-7 .zhuyezhuti nav{
  z-index:1000;
  position:static;
}
</style>
  </div>
  <div class="kapianliebiaocss w-embed">
    <style>
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 240px;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.actions button {
    margin-top: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.actions button:hover {
    opacity: 0.8;
}
</style>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=657c661418a503e0b43c9905" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>